<template>
  <view class="indent">
    <unicloud-db 
			ref="udb" 
			v-slot:default="{data, pagination, loading, hasMore, error}" 
			:collection="collectionList" 
			@load="hanldeData"
		>
      <view v-if="error">{{error.message}}</view>
			<view v-else-if="data.length">
			  <block v-for="(item, index) in data" :key="item._id">
					<indentCardVue :indent="item" />
				</block>
			</view>
			<view style="height: 100%;" v-else-if="!loading && !data.length">
				<van-empty description="空空如也, 快去逛逛吧" />
			</view>
      <uni-load-more v-if="loading || data.length" :status="loading?'loading':(hasMore ? 'more' : 'noMore')"></uni-load-more>
    </unicloud-db>
  </view>
</template>

<script>
	import indentCardVue from './cpns/indent-card.vue'
	
  const db = uniCloud.database()
  export default {
		name: 'indent',
    data() {
			const userInfo = this.$store.state.user.userInfo
      return {
        collectionList: [ 
					db.collection('dish-order-form').where({user_id: userInfo.openid}).orderBy('create_time desc').getTemp(),
					db.collection('dish-user').field('openid,nickname as text,avatar_url,phone,status,role,sex,push_clientid,create_time,last_login_date').getTemp(),
					db.collection('dish-role').field('role_name as text, role_id').getTemp(),
					db.collection('dish-dining-place').field('name as text, _id').getTemp(),
					db.collection('dish-order-form-goods').getTemp(),
				],
        loadMore: {
          contentdown: '',
          contentrefresh: '',
          contentnomore: ''
        }
      }
    },
		components: {indentCardVue},
    onPullDownRefresh() {
      this.$refs.udb.loadData({
        clear: true
      }, () => {
        uni.stopPullDownRefresh()
      })
    },
		onLoad() {
			uni.$on('refreshIndentList', () => {
				this.$refs.udb.loadData({
				  clear: true
				})
			})
		},
    onReachBottom() {
      this.$refs.udb.loadMore()
    },
    methods: {
			async hanldeData(data, ended, pagination) {
				console.log('订单列表', data);
			}
    }
  }
</script>

<style lang="scss">
	.indent {
		padding: 20rpx;
		background-color: #f4f4f4;
		min-height: calc(100vh - 40rpx);
	}
</style>
